import React, { Component } from "react";
import { NavBar,Icon,SearchBar } from "antd-mobile";
import "./SearchCenter.scss";
import myaxios from "../../utils/myaxios";
import {withRouter} from "react-router-dom"
class SearchCenter extends Component {
    getProductList = (params) =>{
        console.log("获取产品列表");
        myaxios
        .get("goods/qsearch",{
            params:{
                query:this.state.inputVal,
            },
        })
        .then((res)=>{
            console.log(res);
            this.setState({
                productList:res,
            });
        });
    };
    state = {
        inputVal:"",
        productList:[],
    };
    handleItemClick=(e)=>{
        let good_id = e.target.getAttribute("data-goods_id");
        this.props.history.push("/goodDetail/"+good_id);
    }
    render() {
        return (
            <div className="yg-sc">
                <NavBar className="yg-sc-nav"
                mode="light"
                icon={<Icon type="left"/>}
                onLeftClick={()=>window.history.go(-1)}
                >
                 搜索中心   
                </NavBar>
                {/* 搜索中心输入框开始 */}
                <SearchBar
                   className="yg-sc-search"
                   placeholder="Search"
                   value={this.state.inputVal}
                   onCancel={()=>this.getProductList()}
                   showCancelButton
                   cancelText="搜索"
                   onChange={(value) => {
                    console.log(value);
                    this.setState({
                      inputVal: value,
                    });
                  }}
                />
                {/* 搜索中心输入框结束 */}
                {/* 产品列表开始 */}
                <div className="yg-sc-list" onClick={this.handleItemClick}>
                  {this.state.productList.map((v) => {
                    return (
                      <div className="sc-list-item" key={v.goods_id} data-goods_id={v.goods_id}>
                        {v.goods_name}
                      </div>
                    );
                  })}
                </div>
                {/* 产品列表结束 */}
                
            </div>
        );
    }
}
export default withRouter(SearchCenter)